<template>
    <div class="silder-components-drag" @mousedown="mousedown" @mousemove="mousemove">
        <div class="silder-components-show">
            <div class="components-drag-icon">{{componetInfo.show_icon}}</div>
            <div class="components-drag-text">{{componetInfo.component_name}}</div>
        </div>
    </div>
</template>
<script lang="ts">
/// <reference path="../../typings/store.d.ts" />
import { Component, Prop, Vue } from 'vue-property-decorator'

interface move{
    x: number;
    y: number;
}

@Component
export default class SilderComponentsDrag extends Vue {
    @Prop()
    componetInfo!: StoreState.componetInfo
    
    componetPressStatus: boolean = false; // 鼠标按下状态
    startClientX: number = 0;
    startClientY: number = 0;
    clientX: number = 0;
    clientY: number = 0;
    move: move = {x: 0, y: 0};
    isCopyedComponent: boolean = false; // 是否创建过复制组件
    headerToolsHeight: number = this.$store.state.headerToolsHeight;
    nodeMoveing: boolean = false;

    mousedown(event: MouseEvent): void {
        document.addEventListener('mouseup', this.mouseup)
        this.componetPressStatus = true;
        this.startClientX = event.clientX;
        this.startClientY = event.clientY;
    }
    mousemove(event: MouseEvent): void {
        if (this.componetPressStatus) {
            this.clientX = event.clientX;
            this.clientY = event.clientY - this.headerToolsHeight;
            this.move = {x: this.clientX - this.startClientX, y: this.clientY - this.startClientY};
            // 若没有创建过复制过组件,则创建一个复制组件
            if (!this.isCopyedComponent) {
                // 如果X轴方向或者Y轴方向鼠标移动的距离超过30
                if (Math.abs(this.move.x) > 8 || Math.abs(this.move.y) > this.headerToolsHeight + 8) {
                    this.isCopyedComponent = true
                    this.$store.commit('SET_currentComponent', this.componetInfo.component_type);
                    const position = {x: this.clientX, y: this.clientY,}
                    this.$store.commit('SET_CopyMoveNodeProp', Object.assign(position, this.componetInfo))
                    this.$store.commit('SET_nodeMoveing', true)
                }
            }
        }
    }
    mouseup(): void {
        this.componetPressStatus = false;
        this.isCopyedComponent = false;
        this.move = {x: 0, y: 0};
        this.$store.commit('SET_currentComponent', '');
        this.$store.commit('SET_CopyMoveNodeProp', null)
        this.$store.commit('SET_nodeMoveing', false)
        document.removeEventListener('mouseup', this.mouseup)
    }
}
</script>

<style lang="less">
.silder-components-drag {
    float: left;
    border: 1px solid #eee;
    margin-top: -1px;
    margin-left: -1px;
    overflow: hidden;
    user-select: none;
    .silder-components-show {
        width: 80px;
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        cursor: pointer;
    }
}
</style>
